<template>
  <fragment class="navMenu">
    <label v-for="navMenu in navMenus" :key="navMenu.id">
      <el-menu-item
        v-if="navMenu.children == null"
        :data="navMenu"
        :index="navMenu.path + ''"
        @click="clickMenu(navMenu)"
      >
        <i :class="navMenu.icon"></i>
        <span slot="title">{{ navMenu.label }}</span>
      </el-menu-item>
      <el-submenu
        v-if="navMenu.children"
        :data="navMenu"
        :index="navMenu.path + ''"
      >
        <template slot="title">
          <i :class="navMenu.icon"></i>
          <span> {{ navMenu.label }}</span>
        </template>
        <nav-menu :navMenus="navMenu.children"></nav-menu>
      </el-submenu>
    </label>
  </fragment>
</template>
   
  <script>
    export default {
      name: 'NavMenu',
      props: ['navMenus'],
      data() {
        return {}
      },
      methods: {
        goto (menu) {
          console.info(menu)
          const currentRoute = this.$route;
          const targetRoute = this.$router.resolve(menu).route;
          if (currentRoute.fullPath !== targetRoute.fullPath) {
              this.$router.push(targetRoute);
            }
        },
        clickMenu(navMenu) {
          this.$store.commit('selectMenu', navMenu)
        }
      }

    }
  </script>
   
  <style scoped>
</style>